<template>


  <div>
  <div class="mdui-table-fluid">

    <table class="mdui-table mdui-table-hoverable">
      <thead>
      <tr>

        <th>管理员用户名</th>
        <th>管理员id</th>
        <th>手机号</th>
      </tr>
      </thead>
      <tbody>

      <tr v-for="(item) in data" v-on:click="goEdit(item)">
        <td>{{item.用户名}}</td>
        <td>{{item.id}}</td>
        <td>{{item.用户手机号}}</td>
      </tr>




      </tbody>
    </table>
    <div class="mdui-dialog" id="admin_list_dialog">
      <div class="mdui-dialog-title">管理员信息</div>
      <div class="mdui-dialog-content">
        <div class="mdui-textfield">
          <label class="mdui-textfield-label">管理员用户名</label>
          {{name}}
        </div>
        <div class="mdui-textfield">
          <label class="mdui-textfield-label">管理员头像</label>
          <img :src=this.image_url width="50px" height="50px">
        </div>
        <div class="mdui-textfield">
          <label class="mdui-textfield-label">管理员id</label>
          {{user_id}}
        </div>
        <div class="mdui-textfield">
          <label class="mdui-textfield-label">手机号</label>
          {{phone_number}}
        </div>

      </div>
      <div class="mdui-dialog-actions">
        <button class="mdui-btn mdui-ripple" v-on:click="update()">取消管理权限</button>
      </div>

    </div>



  </div>
  </div>

</template>

<script>
  import * as mdui from "mdui";
  import axios from "axios";
  import qs from "qs";
  import jm from "./../../static/jm"

  const BASE_URL = 'http://127.0.0.1:8886';

  export default {
    name: 'login',
    data () {
      return {
        token: '',
        data:[],
        name:'',
        user_id:'',
        phone_number:'',
        image_url:'',
        inst:''

      }
    },
    methods:{
      get_image(id){
        return "http://test3.xkspbz.com/images/small/"+id+".jpg";

      },
      goEdit(item){
        this.inst.open();
        this.user_id=item.id;
        this.name=item.用户名;
        this.phone_number=item.用户手机号;
        this.image_url=this.get_image(item.用户头像);
      },

      update(){
        this.token=window.localStorage.getItem("token");
        axios.post(BASE_URL +'/admin/cancel_admin',
          qs.stringify({token:this.token,user_id:this.user_id}),
          {'headers': {'Content-Type': 'application/x-www-form-urlencoded'}})
          .then(re => {
            if(re.data.状态码===200)
            {



              this.inst.close();
              this.getdata();

            }
            else
            {
              this.inst.close();
              if(re.data.备注==='token无效') {
                this.token = window.localStorage.setItem("token", "");
                this.$router.push("/login");
              }
              else
                mdui.default.alert(re.data.备注);
            }
          })
          .catch(err=>{
            this.inst.close();
            mdui.default.alert("网络错误");

          });
      },
      getdata(){
        this.token=window.localStorage.getItem("token");
        axios.post(BASE_URL +'/admin/get_admin_list',
          qs.stringify({token:this.token}),
          {'headers': {'Content-Type': 'application/x-www-form-urlencoded'}})
          .then(re => {
            if(re.data.状态码===200)
            {

              this.data=re.data.列表;

            }
            else
            {
              if(re.data.备注==='token无效') {
                this.token = window.localStorage.setItem("token", "");
                this.$router.push("/login");
              }
              else
                mdui.default.alert(re.data.备注);
            }
          })
          .catch(err=>{
            mdui.default.alert("网络错误");

          });
      }
    },
    mounted() {

      this.token=window.localStorage.getItem("token");
      if(this.token!=null&&this.token.length==64) {
        this.inst = new mdui.default.Dialog('#admin_list_dialog');
        this.getdata();
      }
    }
  }
</script>
